<template>
  <div class="help-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-bg"></div>
      <div class="header-content">
        <h1 class="page-title">帮助中心</h1>
        <p class="page-subtitle">您的问题，我们来解答</p>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="container">
        <!-- 帮助分类与内容 -->
        <div class="help-layout">
          <!-- 左侧导航 -->
          <div class="help-sidebar">
            <div class="sidebar-header">
              <h3 class="sidebar-title">帮助分类</h3>
            </div>
            <ul class="help-nav">
              <li class="help-nav-item">
                <a href="#registration" class="help-nav-link active">
                  <el-icon class="nav-icon"><i-ep-user /></el-icon>
                  注册与登录
                </a>
              </li>
              <li class="help-nav-item">
                <a href="#publish" class="help-nav-link">
                  <el-icon class="nav-icon"><i-ep-edit /></el-icon>
                  发布商品
                </a>
              </li>
              <li class="help-nav-item">
                <a href="#purchase" class="help-nav-link">
                  <el-icon class="nav-icon"><i-ep-shopping-cart /></el-icon>
                  购买商品
                </a>
              </li>
              <li class="help-nav-item">
                <a href="#payment" class="help-nav-link">
                  <el-icon class="nav-icon"><i-ep-finished /></el-icon>
                  支付方式
                </a>
              </li>
              <li class="help-nav-item">
                <a href="#account" class="help-nav-link">
                  <el-icon class="nav-icon"><i-ep-setting /></el-icon>
                  账号管理
                </a>
              </li>
              <li class="help-nav-item">
                <a href="#security" class="help-nav-link">
                  <el-icon class="nav-icon"><i-ep-lock /></el-icon>
                  安全须知
                </a>
              </li>
              <li class="help-nav-item">
                <a href="#faq" class="help-nav-link">
                  <el-icon class="nav-icon"><i-ep-question /></el-icon>
                  常见问题
                </a>
              </li>
            </ul>

            <div class="contact-support">
              <h4 class="support-title">需要更多帮助？</h4>
              <p class="support-desc">如果您没有找到需要的答案，请联系我们的客服团队</p>
              <router-link to="/contact" class="support-button">
                联系我们
              </router-link>
            </div>
          </div>

          <!-- 右侧内容 -->
          <div class="help-content">
            <!-- 注册与登录 -->
            <section id="registration" class="help-section">
              <h2 class="section-title">注册与登录</h2>
              <div class="section-content">
                <div class="help-item">
                  <h3 class="help-title">如何注册账号？</h3>
                  <ul class="help-steps">
                    <li class="step-item">点击页面右上角的"注册"按钮</li>
                    <li class="step-item">填写手机号码、设置密码</li>
                    <li class="step-item">获取并输入短信验证码</li>
                    <li class="step-item">同意用户协议和隐私政策</li>
                    <li class="step-item">点击"注册"完成账号创建</li>
                  </ul>
                </div>

                <div class="help-item">
                  <h3 class="help-title">忘记密码怎么办？</h3>
                  <p class="help-text">在登录页面点击"忘记密码"，按照提示操作：</p>
                  <ul class="help-steps">
                    <li class="step-item">输入注册时的手机号码</li>
                    <li class="step-item">获取并输入短信验证码</li>
                    <li class="step-item">设置新密码并确认</li>
                    <li class="step-item">点击"重置密码"完成操作</li>
                  </ul>
                </div>
              </div>
            </section>

            <!-- 发布商品 -->
            <section id="publish" class="help-section">
              <h2 class="section-title">发布商品</h2>
              <div class="section-content">
                <div class="help-item">
                  <h3 class="help-title">如何发布二手商品？</h3>
                  <ul class="help-steps">
                    <li class="step-item">登录账号后，点击导航栏的"发布商品"按钮</li>
                      <li class="step-item">填写商品标题、价格、详细描述</li>
                    <li class="step-item">上传商品图片（最多9张）</li>
                    <li class="step-item">选择商品分类和新旧程度</li>
                    <li class="step-item">设置交易方式和地点</li>
                    <li class="step-item">点击"发布"完成商品上架</li>
                  </ul>
                </div>

                <div class="help-item">
                  <h3 class="help-title">发布商品有什么要求？</h3>
                  <ul class="help-list">
                    <li class="list-item">商品必须为个人闲置物品，不得发布全新商品进行商业销售</li>
                    <li class="list-item">商品信息必须真实、准确，不得虚假宣传</li>
                    <li class="list-item">图片必须为实物拍摄，清晰展示商品细节</li>
                    <li class="list-item">价格应合理，避免恶意抬高或低价扰乱市场</li>
                    <li class="list-item">禁止发布违禁品、盗版商品等违法违规物品</li>
                  </ul>
                </div>
              </div>
            </section>

            <!-- 购买商品 -->
            <section id="purchase" class="help-section">
              <h2 class="section-title">购买商品</h2>
              <div class="section-content">
                <div class="help-item">
                  <h3 class="help-title">如何购买商品？</h3>
                  <ul class="help-steps">
                    <li class="step-item">浏览或搜索找到想要购买的商品</li>
                    <li class="step-item">点击商品进入详情页，查看商品信息</li>
                    <li class="step-item">点击"联系卖家"或"加入购物车"</li>
                    <li class="step-item">与卖家沟通商品细节和交易方式</li>
                    <li class="step-item">确认购买后，进行支付</li>
                    <li class="step-item">完成交易并评价</li>
                  </ul>
                </div>

                <div class="help-item">
                  <h3 class="help-title">购物车功能说明</h3>
                  <p class="help-text">购物车可以帮助您暂时保存想要购买的商品：</p>
                  <ul class="help-list">
                    <li class="list-item">可以同时将多个商品加入购物车进行比较</li>
                    <li class="list-item">可以批量管理购物车中的商品</li>
                    <li class="list-item">可以直接从购物车提交订单</li>
                  </ul>
                </div>
              </div>
            </section>

            <!-- 支付方式 -->
            <section id="payment" class="help-section">
              <h2 class="section-title">支付方式</h2>
              <div class="section-content">
                <div class="help-item">
                  <h3 class="help-title">平台支持哪些支付方式？</h3>
                  <ul class="payment-methods">
                    <li class="payment-method">
                      <el-icon class="payment-icon"><i-ep-platform-wechat /></el-icon>
                      <span class="payment-name">微信支付</span>
                    </li>
                    <li class="payment-method">
                      <el-icon class="payment-icon"><i-ep-money /></el-icon>
                      <span class="payment-name">支付宝支付</span>
                    </li>
                    <li class="payment-method">
                      <el-icon class="payment-icon"><i-ep-tickets /></el-icon>
                      <span class="payment-name">线下现金交易</span>
                    </li>
                  </ul>
                </div>

                <div class="help-item">
                  <h3 class="help-title">如何确保支付安全？</h3>
                  <ul class="help-list">
                    <li class="list-item">优先选择平台担保交易，避免直接转账给卖家</li>
                    <li class="list-item">收到商品并确认无误后再确认收货</li>
                    <li class="list-item">不要相信任何要求线下支付或转账的诱导信息</li>
                    <li class="list-item">如遇可疑情况，请立即联系平台客服</li>
                  </ul>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

onMounted(() => {
  // 设置页面标题
  document.title = '帮助中心 - 校园二手交易平台'
  
  // 实现滚动监听和导航高亮
  const handleScroll = () => {
    const sections = document.querySelectorAll('.help-section')
    const navLinks = document.querySelectorAll('.help-nav-link')
    
    let currentSection = ''
    
    sections.forEach(section => {
      const sectionTop = section.offsetTop
      if (window.scrollY >= sectionTop - 200) {
        currentSection = section.getAttribute('id')
      }
    })
    
    navLinks.forEach(link => {
      link.classList.remove('active')
      if (link.getAttribute('href') === `#${currentSection}`) {
        link.classList.add('active')
      }
    })
  }
  
  // 实现平滑滚动
  document.querySelectorAll('.help-nav-link').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault()
      const targetId = this.getAttribute('href')
      const targetElement = document.querySelector(targetId)
      
      window.scrollTo({
        top: targetElement.offsetTop - 100,
        behavior: 'smooth'
      })
    })
  })
  
  window.addEventListener('scroll', handleScroll)
  handleScroll() // 初始化
})
</script>

<style scoped>
.help-container {
  min-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
}

/* 页面头部样式 */
.page-header {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
}

.page-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.page-subtitle {
  font-size: 18px;
  opacity: 0.9;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  padding: 60px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.help-layout {
  display: flex;
  gap: 40px;
}

/* 左侧导航样式 */
.help-sidebar {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 120px;
  height: fit-content;
}

.sidebar-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.sidebar-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.help-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #f8f9fa;
  border-radius: 10px;
  overflow: hidden;
}

.help-nav-item {
  margin: 0;
  padding: 0;
}

.help-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  color: #666;
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.help-nav-link:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding-left: 25px;
}

.help-nav-link.active {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border-left-color: #667eea;
  font-weight: 500;
}

.nav-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

/* 联系客服样式 */
.contact-support {
  margin-top: 30px;
  padding: 25px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-radius: 10px;
  text-align: center;
}

.support-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.support-desc {
  color: #666;
  margin-bottom: 20px;
  font-size: 14px;
}

.support-button {
  display: inline-block;
  padding: 10px 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.support-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* 右侧内容样式 */
.help-content {
  flex: 1;
}

.help-section {
  margin-bottom: 60px;
  padding-bottom: 30px;
  border-bottom: 1px solid #f0f0f0;
}

.help-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 30px;
  position: relative;
  padding-left: 20px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.section-content {
  color: #666;
}

.help-item {
  margin-bottom: 40px;
}

.help-item:last-child {
  margin-bottom: 0;
}

.help-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.help-text {
  line-height: 1.8;
  margin-bottom: 15px;
}

/* 步骤列表样式 */
.help-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step-item {
  position: relative;
  padding-left: 40px;
  margin-bottom: 15px;
  line-height: 1.6;
}

.step-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.step-item:nth-child(1)::before { content: '1'; }
.step-item:nth-child(2)::before { content: '2'; }
.step-item:nth-child(3)::before { content: '3'; }
.step-item:nth-child(4)::before { content: '4'; }
.step-item:nth-child(5)::before { content: '5'; }
.step-item:nth-child(6)::before { content: '6'; }

/* 普通列表样式 */
.help-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.list-item::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: bold;
}

/* 支付方式样式 */
.payment-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.payment-method:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: translateY(-3px);
}

.payment-icon {
  font-size: 24px;
  color: #667eea;
}

.payment-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .help-layout {
    flex-direction: column;
  }
  
  .help-sidebar {
    width: 100%;
    position: static;
  }
  
  .help-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: transparent;
  }
  
  .help-nav-item {
    flex: 1 1 calc(50% - 5px);
    min-width: 200px;
  }
  
  .help-nav-link {
    background: #f8f9fa;
    border-radius: 8px;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  
  .help-nav-link.active {
    border-left: none;
    border-bottom-color: #667eea;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 36px;
  }
  
  .section-title {
    font-size: 24px;
  }
  
  .help-nav-item {
    flex: 1 1 100%;
  }
  
  .payment-methods {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .page-header {
    height: 250px;
  }
  
  .page-title {
    font-size: 28px;
  }
  
  .help-item {
    margin-bottom: 30px;
  }
  
  .step-item {
    padding-left: 35px;
  }
  
  .step-item::before {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
}
</style>